import type { FC, PropsWithChildren } from "react";
import { getRgb, initvalue } from '../utils';
import { context } from "../context";

const Index: FC< PropsWithChildren<Partial<Resumes> & { style?: React.CSSProperties;head?: React.ReactElement;widthOutLayout?: boolean }>> = ({ children, style, head, widthOutLayout }) => {
  const { resume: { customization } } = context

  const { spacing, layout, colors, header: { position } } = customization
  const { header, marginVertical, marginHorizontal: marginHorizontal2 } = spacing
  const { marginVerticaltop, marginVerticalbottom, marginHorizontal } = header || {}
  const { spacingFactor } = spacing || {}
  const customStyle: any = {}
  const displayStyle: any = {}

  if (layout.detailsPosition === 'top') {
    displayStyle.display = 'flex'
    displayStyle.gap = '10px'
    // customStyle.flexWrap = 'wrap'
    if (colors.mode !== 'simple') {
      displayStyle.backgroundColor = getRgb(colors.light.backgroundColor)
      displayStyle.color = getRgb(colors.light.textColor)
    }

    if (position === 'top') {
      displayStyle.display = 'block'
      displayStyle.textAlign = 'center'
    }
    if (position === 'right') {
      displayStyle.flexDirection = 'row-reverse'
    }

    if (widthOutLayout) {
      customStyle.padding = `
      ${((marginVerticaltop || 0)) * 2 + initvalue.marginVerticaltop}mm 
      ${((marginHorizontal || 0)) * 2 + initvalue.marginHorizontal}mm 
      ${(marginVerticalbottom || 0) * 2 + initvalue.marginVerticalbottom}mm
      `
    }
    else {
      customStyle.padding = `
      ${((marginVerticaltop || 0) + (marginVertical || 0)) * 2 + initvalue.marginVerticaltop}mm 
      ${((marginHorizontal || 0) + (marginHorizontal2 || 0)) * 2 + initvalue.marginHorizontal}mm 
      ${(marginVerticalbottom || 0) * 2 + initvalue.marginVerticalbottom}mm
      `
    }
  }
  else {
    customStyle.padding = `
    ${((marginVerticaltop || 0)) * 2 + initvalue.marginVerticaltop}mm 
    ${((marginHorizontal || 0)) * 2 + initvalue.marginHorizontal}mm 
    ${(marginVerticalbottom || 0) * 2 + initvalue.marginVerticalbottom}mm
    `
    // customStyle.marginBottom = `${(spacingFactor || 0) + 15}px`
  }
  customStyle.marginBottom = `${(spacingFactor || 0) * 2 + 10}px`
  // layout.detailsPosition === 'top' ? { paddingBottom: `${spacingFactor}mm` }
  if (head) {
    return <div style={customStyle}>
      {head}
      <div style={{ ...displayStyle, ...style }}>{children}</div>
    </div>
  }
  return (<div id='headerWrapper' style={{ ...customStyle, ...displayStyle, ...style }}>{children}</div>);
}

export default Index;
